<template>
  <div class="container container-nav shadow-drop-center">
    <nav class="nav-main">
      <div class="name">
        <img src="./images/head.jpg" alt="">
        <span @click="goHome">南山有壶酒 未定义人生</span> 
      </div>
      <ul class="menu">
        <li @click="goHome">首页</li>
        <li>开发日志</li>
        <li @click="goMainLook" class="no">
          <el-dropdown
          hide-timeout="100"
          show-timeout="0"
          >
            <span class="el-dropdown-link">
              十年生死
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="goOne">十年</el-dropdown-item>
              <el-dropdown-item @click.native="goOne">生死</el-dropdown-item>
              <el-dropdown-item @click.native="goOne">抉择</el-dropdown-item>
              <el-dropdown-item @click.native="goOne">铭刻</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li>十年三国</li>
        <li @click="goLogin" style="width:100px;" v-show="ifLogin">登录/注冊</li>
        <!-- <li @click="goLogin" style="width:100px;" v-show="false">登录/注冊</li> -->
        <li style="width:250px; top: -3px;"  v-show="!ifLogin">
        <!-- <li style="width:250px; top: -3px;"  v-show="true"> -->

          <img :src="headerImageUrl" alt="" >
          <a href="javascript:;" @click="goPersonalCenter">{{nick_name}}</a>&nbsp;<a href="javascript:;" @click="exitLogin">退出</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
    name:'NavTenYear',
    data() {
      return {
        ifLogin: true,   //false 显示已经登录
        user:{},
        headerImageUrl:'',
        nick_name:''
      };
    },
    mounted(){
     this.init();
    },
    methods: {
      goHome() {
        this.$router.push({
          name:'TenYearOf',
          query:{from:`${this.$route.path.substr(1)}`,fix:nanoid(5)},
            params:this.$route.params
        })
      },
      goLogin(){
          this.$router.push({
            name:'RegisterAndLogin',
            query:{from:`${this.$route.path.substr(1)}`,fix:nanoid(5)},
            params:this.$route.params
        })
      },
      goMainLook(){
          this.$router.push({
            name:'MainLook',
            query:{from:`${this.$route.path.substr(1)}`,fix:nanoid(5)},
            params:this.$route.params

        })
      },
      goPersonalCenter(){
          if(!this.$route.fullPath.startsWith('/PersonalCenter/') ){
            this.$router.push({
              name:'PersonalCenter',
              query:{from:`${this.$route.path.substr(1)}`,fix:nanoid(5)},
              params:this.$route.params
            })
          }
      },
      //退出登录
      exitLogin(){
        this.$store.dispatch('registerAndLogin/reqExitLoginAction').then(()=>{
          this.ifLogin = true
          this.user = {}
          sessionStorage.setItem('header_url','/article_header_image/0.jpg')
          this.$message({
            message:'退出成功',
            type:'success'
          })
          this.$router.replace({
            name:'TenYearOf'
          })
        });
      },
      goOne(event){
        let title = event.target.innerText
        this.$router.push({
            name:'oneRoom',
            query:{title,fix:nanoid(5)},
        })
      }
    },
    activated(){
      //判断登录
      this.$mount('#app');
      this.init();
    },
    computed: {
      init() {
        return ()=>{
          this.$store.dispatch('registerAndLogin/reqLoginJudge').then((result)=>{
          let message = result.data;
          this.user = message.data;
          //为空则需要登录
          if(this.user === null){
            this.ifLogin = true;
          }else{
            this.ifLogin = false;
            this.headerImageUrl = this.user.header_url
            this.nick_name = this.user.user_nick_name
          }
        });
        }
      },
    
    },
}
</script>

<style lang="less" scoped>
  .container-nav{
    height: 60px;
    width: 100vw;
    box-sizing: border-box;
    display: flex;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
    position: relative;
    z-index: 999;
    .nav-main{
      display: flex;
      flex-direction: row;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      position: relative;
      img{
        height: 30px;
        width: 30px;
        border-radius: 2em;
        transform: translate(0.5vw,0.6vh);
        cursor: pointer;
        user-select: none;
      }
      .name{
       font-family: '白舟极太楷书','QNHGXK';
        font-size: 25px;
        cursor: pointer;
        user-select: none;
        span{
          display: inline-block;
          margin-left: 15px;
        }
      }
      .menu{
       display: flex;
       flex-direction: row;
       li{
        font-family: '白舟极太楷书','QNHGXK','monospace';
        margin-left:5px;
        font-size: 18px;
        margin-right: 5px;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        user-select: none;
        text-align: center;
        width: 80px;
        &>.el-dropdown{
          width: 75px;
          color: black;
          &>span{
            font-size:18px ;
          }
        }
        &:last-child{
          position: relative;
          left: -11px;
        }
        &>img{
          position: relative;
          height: 30px;
          width: 30px;
          top: 5px;
          left: -10px;
        }
        &>span{
          font-family: '白舟极太楷书','QNHGXK';
        }
        & a:hover{
          color: rgb(102, 178, 245);
        }
        &:not(.no):hover{
          color: rgb(102, 178, 245);
          -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          @-webkit-keyframes slide-top {
            0% {
              -webkit-transform: translateY(0);
                      transform: translateY(0);
            }
            100% {
              -webkit-transform: translateY(-5px);
                      transform: translateY(-5px);
            }
          }
          @keyframes slide-top {
            0% {
              -webkit-transform: translateY(0);
                      transform: translateY(0);
            }
            100% {
              -webkit-transform: translateY(-5px);
                      transform: translateY(-5px);
            }
          }

        }
       }
      }
    }
    .shadow-drop-center {
      -webkit-animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    @-webkit-keyframes shadow-drop-center {
      0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      }
      100% {
        -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
                box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
      }
    }
    @keyframes shadow-drop-center {
      0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      }
      100% {
        -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
                box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
      }
    }

  }
</style>